<!DOCTYPE html>
<title>&lt;audio> without controls has display:none irrespective of author CSS</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
audio {
  display: inline !important;
}
</style>
<body>
<script>
test(function() {
  var audio = document.createElement('audio');
  document.body.appendChild(audio);
  assert_equals(audio.clientWidth, 0);
  assert_equals(getComputedStyle(audio).display, "none");
  audio.controls = true;
  assert_equals(audio.clientWidth, 300);
  assert_equals(getComputedStyle(audio).display, "inline");
  audio.controls = false;
  assert_equals(audio.clientWidth, 0);
  assert_equals(getComputedStyle(audio).display, "none");
});
</script>
